<template>
	<view class="ability-detail-container">
		<!-- 顶部导航栏 -->
		<view class="top-nav" :style="{ top: safeDistance + 'px' }">
			<view class="back-button" @click="handleGoBack">
				<text class="back-icon">←</text>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view class="content-scroll" scroll-y>
			<!-- 能力头部信息 -->
			<view class="ability-header" :style="{ background: abilityDetail.gradient }">
				<view class="ability-icon-large-wrapper">
					<text class="ability-icon-large">{{ abilityDetail.icon }}</text>
				</view>
				<text class="ability-name-large">{{ abilityDetail.name }}</text>
				<text class="ability-type-large">{{ abilityDetail.type }}</text>
				<view class="ability-level-badge">
					<text class="level-text">{{ abilityDetail.level }}</text>
				</view>
			</view>

			<!-- 能力描述 -->
			<view class="content-section">
				<text class="section-title">能力描述</text>
				<text class="section-content">{{ abilityDetail.description }}</text>
			</view>

			<!-- 能力详细说明 -->
			<view class="content-section">
				<text class="section-title">详细说明</text>
				<text class="section-content story-content">{{ abilityDetail.detail }}</text>
			</view>

			<!-- 能力特点 -->
			<view class="content-section">
				<text class="section-title">能力特点</text>
				<view class="features-list">
					<view 
						v-for="(feature, index) in abilityDetail.features" 
						:key="index" 
						class="feature-item"
					>
						<text class="feature-icon">✨</text>
						<text class="feature-text">{{ feature }}</text>
					</view>
				</view>
			</view>

			<!-- 觉醒统计 -->
			<view class="content-section">
				<text class="section-title">觉醒统计</text>
				<view class="stats-wrapper">
					<view class="stat-item">
						<text class="stat-label">觉醒人数</text>
						<text class="stat-value">{{ abilityDetail.count }}人</text>
					</view>
					<view class="stat-item">
						<text class="stat-label">能力等级</text>
						<text class="stat-value">{{ abilityDetail.level }}</text>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, computed } from 'vue';
	import { getAbilityById } from '@/data/ability';
	import type { Ability } from '@/types/ability';

	const abilityDetail = ref<Ability>({
		id: 0,
		name: '',
		type: '',
		icon: '',
		description: '',
		level: '',
		count: 0,
		detail: '',
		features: [],
		gradient: ''
	});

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		return safeAreaTop + 20;
	});

	onLoad((options: any) => {
		const id = parseInt(options.id || '1');
		const foundAbility = getAbilityById(id);

		if (foundAbility) {
			abilityDetail.value = foundAbility;
		} else {
			uni.showToast({
				title: '未找到该能力信息',
				icon: 'none',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		}
	});

	const handleGoBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	.ability-detail-container {
		min-height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #e9ecef 100%);
		position: relative;
	}

	/**
	 * 顶部导航栏
	 */
	.top-nav {
		position: absolute;
		left: 24rpx;
		z-index: 10;
		box-sizing: border-box;
	}

	.back-button {
		width: 72rpx;
		height: 72rpx;
		background: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		transition: all 0.3s ease;
	}

	.back-button:active {
		transform: scale(0.95);
	}

	.back-icon {
		font-size: 40rpx;
		color: #1a202c;
		font-weight: 700;
	}

	/**
	 * 能力头部信息
	 */
	.ability-header {
		padding: 120rpx 32rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		color: white;
		position: relative;
	}

	.ability-icon-large-wrapper {
		width: 200rpx;
		height: 200rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.2);
		margin-bottom: 32rpx;
		backdrop-filter: blur(10rpx);
	}

	.ability-icon-large {
		font-size: 120rpx;
		line-height: 1;
	}

	.ability-name-large {
		font-size: 56rpx;
		font-weight: 900;
		margin-bottom: 16rpx;
		text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	}

	.ability-type-large {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 24rpx;
		opacity: 0.95;
	}

	.ability-level-badge {
		padding: 12rpx 24rpx;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 50rpx;
		backdrop-filter: blur(10rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.3);
	}

	.level-text {
		font-size: 28rpx;
		color: white;
		font-weight: 800;
	}

	/**
	 * 内容区域
	 */
	.content-scroll {
		height: calc(100vh - 400rpx);
		width: 100%;
		box-sizing: border-box;
	}

	.content-section {
		background: white;
		margin: 24rpx 24rpx 0;
		padding: 32rpx;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 800;
		color: #1a202c;
		display: block;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 3rpx solid #667eea;
	}

	.section-content {
		font-size: 28rpx;
		color: #475569;
		line-height: 1.8;
		display: block;
	}

	.story-content {
		text-align: justify;
		text-indent: 2em;
	}

	/**
	 * 能力特点列表
	 */
	.features-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.feature-item {
		display: flex;
		align-items: flex-start;
		gap: 16rpx;
		padding: 20rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, #f1f5f9 100%);
		border-radius: 16rpx;
		border-left: 6rpx solid #667eea;
	}

	.feature-icon {
		font-size: 32rpx;
		line-height: 1;
		flex-shrink: 0;
	}

	.feature-text {
		font-size: 28rpx;
		color: #1a202c;
		line-height: 1.7;
		flex: 1;
		font-weight: 500;
	}

	/**
	 * 觉醒统计
	 */
	.stats-wrapper {
		display: flex;
		gap: 24rpx;
	}

	.stat-item {
		flex: 1;
		padding: 24rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, #f1f5f9 100%);
		border-radius: 16rpx;
		text-align: center;
	}

	.stat-label {
		font-size: 24rpx;
		color: #64748b;
		display: block;
		margin-bottom: 12rpx;
		font-weight: 600;
	}

	.stat-value {
		font-size: 36rpx;
		font-weight: 800;
		color: #667eea;
		display: block;
	}

	/**
	 * 底部占位
	 */
	.bottom-placeholder {
		height: 120rpx;
	}
</style>

